<template>
  <el-form ref="form" :model="ruleForm" :rules="rules" label-width="100px" size="small">
    <el-form-item label="标题:" prop="newsTitle">
      <el-input v-model="ruleForm.newsTitle"></el-input>
    </el-form-item>
    <el-form-item label="引言:">
      <el-input type="textarea" v-model="ruleForm.newsLead"></el-input>
    </el-form-item>
    <el-form-item label="正文:">
      <div style="border: 1px solid #ccc;">
        <Toolbar
                style="border-bottom: 1px solid #ccc"
                :editor="editor"
                :defaultConfig="toolbarConfig"
                :mode="mode"/>
        <Editor
                style="height: 400px; overflow-y: hidden;"
                v-model="html"
                :defaultConfig="editorConfig"
                :mode="mode"
                @onCreated="onCreated"/>
      </div>
    </el-form-item>
    <el-form-item label="分类:">
      <avue-input-tree
              leaf-only multiple
              v-model="ruleForm.newsTypeIds"
              placeholder="请选择分类"
              type="tree"
              :dic="dic">
      </avue-input-tree>
    </el-form-item>
    <el-form-item label="关键词:">
      <el-tag
              :key="tag"
              v-for="tag in ruleForm.keywords"
              closable
              :disable-transitions="false"
              @close="handleClose(tag)">
        {{tag}}
      </el-tag>
      <el-input
              class="input-new-tag"
              v-if="inputVisible"
              v-model="inputValue"
              ref="saveTagInput"
              size="small"
              @keyup.enter.native="handleInputConfirm"
              @blur="handleInputConfirm">
      </el-input>
      <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 添加</el-button>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">确认</el-button>
      <el-button @click="cancel">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<style src="@wangeditor/editor/dist/css/style.css"></style>
<script>
  import {Editor, Toolbar} from '@wangeditor/editor-for-vue'
  import {newsPublic, newTypeList, saveNews} from '@/api/operations-center/news'

  export default {
    name: "NewsManageAdd",
    mixins: [newsPublic],
    components: {Editor, Toolbar},
    data() {
      return {
        ruleForm: {
          id: ''
        }
      }
    },
    methods: {
      /**
       * {获取新闻分类}
       *
       * @author: 宋康
       * @date: 2022/8/24 11:40
       */
      queryNewTypeList() {
        newTypeList().then(res => {
          if (res.status) {
            let data = res.data;
            for (let d of data) {
              d.label = d.newsTypeName;
              d.value = d.id;
            }
            this.$XEUtils.toArrayTree(data)
            this.dic = data;
          }
        })
      },
      /**
       * {保存}
       *
       * @author: 宋康
       * @date: 2022/8/25 10:31
       */
      onSubmit() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.ruleForm.newsBody = this.editor.getHtml();
            saveNews(this.ruleForm).then(res => {
              if (res.status) {
                this.$XModal.alert({
                  content: '添加成功',
                  status: 'success',
                }).then(() => {
                  this.cancel();
                })
              } else {
                this.$XModal.alert({
                  content: res['msg'],
                  status: 'error',
                })
              }
            })
          } else {
            return false;
          }
        });
      }
    },
    mounted() {
      this.queryNewTypeList();
    }
  }
</script>

<style lang="scss" scoped>
  .el-tag + .el-tag {
    margin-left: 10px;
  }

  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>
